<!DOCTYPE html>
<html lang="en">
  <head>
	<link rel="stylesheet" href="mini-default.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<title>mini.css - Quick Reference</title>
	<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
	<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, reference, cheatsheet ">
	<meta name="author" content="Angelos Chalaris (chalarangelo)">
	<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
	<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
	<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
	<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
	<style>
	@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
	@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
	#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm.col-lg-offset.col-lg-10{padding: 0 !important;}}
	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; } .box-left { text-align: left; }
	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
	.col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
	@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #c9c9c9;}}
	h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
	</style>
  </head>
  <body>
		<header class="sticky">
			<a href="index" class="logo"><span id="header-logo">m</span></a>
				<label class="drawer-toggle button" for="navigation-toggle"></label>
			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
		</header>
		<div class="container" style="padding-left: 0.25rem;">
			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
				<label class="close" for="navigation-toggle"></label>
				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
				<a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
				<a href="#core">Core</a> <a href="#grid">Grid</a> <a href="#input_control">Input Control</a> <a href="#navigation">Navigation</a> <a href="#table">Table</a>
				<a href="#card">Card</a> <a href="#tab">Tab</a> <a href="#contextual">Contextual</a> <a href="#progress">Progress</a> <a href="#utility">Utility</a> <br/>
			</nav>
    <!-- Insert your page content here-->
    <div class="col-sm-12 col-md-8 col-lg-10"><main>
      <div class="row" style="padding-top: 40px;">
        <div class="col-sm-12">
          <h1>Quick Reference</h1>
          <p style="text-align:justify">If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules">modules</a> page.</p>
          <p style="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2>Setup &amp; usage</h2></div>
            <div class="section">
							<p style="text-align:justify">You can download <strong>mini.css</strong> using  <strong>npm</strong>, <strong>yarn</strong> or <strong>Bower</strong>:</p>
              <div class="row">
								<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
								<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
                <div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
              </div><br>
              <p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
							<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
							<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
              <p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
              <pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="core">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="core" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a>&nbsp;Core</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Headings <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;h1&gt;Heading 1&lt;small&gt;Subheading&lt;/small&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;small&gt;Subheading&lt;/small&gt;&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;small&gt;Subheading&lt;/small&gt;&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;small&gt;Subheading&lt;/small&gt;&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;small&gt;Subheading&lt;/small&gt;&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;small&gt;Subheading&lt;/small&gt;&lt;/h6&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Typography</h3>
                <ul style="text-align:justify">
                  <li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
                  <li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
                  <li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
                  <li>The <code>font-size</code> for the root element is <code>16px</code></li>
                  <li>The <code>line-height</code> is <code>1.5</code></li>
                  <li>All HTML headings are pre-styled</li>
                  <li>Styling provided for <code>&lt;small&gt;</code> elements inside headings</li>
                  <li>Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled</li>
                  <li>Images are responsive by default</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Common textual elements <a href="https://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;p&gt;This is a paragraph with some &lt;strong&gt;bold text&lt;/strong&gt; and some &lt;em&gt;italics text&lt;/em&gt;.&lt;/p&gt;
&lt;a href=&quot;#&quot;&gt;This is a link.&lt;/a&gt;
&lt;small&gt;This is some small text.&lt;/small&gt;
&lt;sub&gt;Subscript&lt;/sub&gt;
&lt;sup&gt;Superscript&lt;/sup&gt;
&lt;code&gt;Inline code&lt;/code&gt;
&lt;kbd&gt;Keyboard Input&lt;/kbd&gt;
&lt;hr&gt;
&lt;pre&gt;This is some preformatted text.&lt;/pre&gt;
&lt;blockquote cite=&quot;Quotation source&quot;&gt;
  This is some quoted text from another website or person.
&lt;/blockquote&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Lists &amp; images<a href="https://codepen.io/chalarangelo/pen/woRKay" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;ul&gt;
  &lt;li&gt;Apple&lt;/li&gt;
  &lt;li&gt;Orange&lt;/li&gt;
  &lt;li&gt;Strawberry&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
  &lt;li&gt;Wake up&lt;/li&gt;
  &lt;li&gt;Eat breakfast&lt;/li&gt;
  &lt;li&gt;Go to work&lt;/li&gt;
&lt;/ol&gt;

&lt;figure&gt;
  &lt;img src=&quot;...&quot;&gt;
  &lt;figcaption&gt;Image caption&lt;/figcaption&gt;
&lt;/figure&gt;</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="grid">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="grid" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a>&nbsp;Grid</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Basic layout <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-1&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-11&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-2&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-3&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-9&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-4&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-8&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-5&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-7&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-6&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-12&quot;&gt;
    &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul  style="text-align:justify">
                  <li>Based on the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout Module</a></li>
                  <li>Grid structured as follows:
                    <ol>
                      <li><code>.container</code> serves as the grid system's wrapper</li>
                      <li>Multiple <code>.row</code> elements serve as the grid system's rows</li>
                      <li>Multiple <code>.col-<span class="fore-primary">SCR_SZ</span></code> and/or <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> elements specify serve as the grid system's columns (fluid and preset respectively)</li>
                    </ol>
                  </li>
                  <li><code><span class="fore-primary">SCR_SZ</span></code> values:
                    <ul  style="text-align:justify">
                      <li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
                      <li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
                      <li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
                    </ul>
                  </li>
                  <li><code><span class="fore-secondary">COL_WD</span></code> can be any integer value between <code>1</code> and <code>12</code> (both inclusive)</li>
                  <li>Fluid columns can create irregularly-sized columns in a layout</li>
                  <li>You can nest rows inside columns, but not columns inside columns or rows inside rows</li>
                  <li>An element can be a row and column at the same time</li>
                  <li>You can mix preset and fluid columns</li>
                  <li>Always wrap content in columns, never leave content unwrapped inside a row</li>
                  <li>Do not mix rows or columns with unwrapped content on the same level</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Screen-specific layouts <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-12 col-md-3 col-lg-2&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-12 col-md-5 col-lg-7&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-12 col-md-4 col-lg-3&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul  style="text-align:justify">
                  <li>Apply multiple column classes to the same element, one for each screen size, to define different layouts</li>
                  <li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
                  <li>Try to make page content vertical for smaller devices, using <code>.col-sm-12</code> and transition to two or three columns on larger screen sizes</li>
                  <li>Combine with offsets and reordering as shown below</li>
                  <li>You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size</li>
                  <li>Always start with a <code>.col-sm</code> or <code>.col-sm-<span class="fore-secondary">COL_WD</span></code> style, otherwise smaller devices will not display your content properly</li>
                </ul>
              </div>
            </div>
			<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Predefined layouts <a href="https://codepen.io/chalarangelo/pen/ygGqQg" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;row cols-sm-6&quot;&gt;
  &lt;div&gt;
    &lt;p&gt;col-sm-6&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;p&gt;col-sm-6&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul  style="text-align:justify">
                  <li>Available both as fluid column layouts, using <code>.cols-<span class="fore-primary">SCR_SZ</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and fixed width column layouts, using <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><span class="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the columns</li>
				  <li>Can define screen-specific predefined layouts</li>
				  <li>Can be combined with offsets and reordering, but not normal grid layout classes</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Column offsets <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-10 col-sm-offset-1&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm col-sm-offset-2&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-6 col-sm-offset-3&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-8 col-sm-offset-4&quot;&gt;
    &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Create offsets using the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-<span class="fore-secondary">COL_WD</span></code> classes</li>
                  <li><code><span class="fore-secondary">COL_WD</span></code> can be any integer from <code>0</code> to <code>11</code> (both inclusive)</li>
                  <li>You can mix offset columns and non-offset columns</li>
                  <li>Specify offsets in combination with existing column styling, not instead</li>
                  <li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
                  <li>You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-0</code></li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Column reordering <a href="https://codepen.io/chalarangelo/pen/vyvyNo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm col-md-last col-lg-normal&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-first col-md-normal&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm col-md-first col-lg-normal&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Create reorders using <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> classes for first, last and normal ordering respectively</li>
                  <li>Default ordering is based on order of appearance</li>
                  <li>Specify reorders in combination with existing column styling, not instead</li>
                  <li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
                  <li>You can use multiple <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> elements to group your elements according to the desired layout</li>
                  <li>You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code></li>
                </ul>
              </div>
            </div>
			<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Media object pattern<a href="https://codepen.io/chalarangelo/pen/oBdvPX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-sm-1&quot;&gt;
    &lt;img src=&quot;...&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-sm&quot;&gt;
    &lt;h2&gt;Media object heading&lt;/h2&gt;
    &lt;p&gt;Media object content...&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Not a new component, rather a <a href="https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">popular pattern</a></li>
				  <li>Use two columns, one for the media (i.e. <code>&lt;img&gt;</code>) and one for the textual content</li>
				  <li>Compatible with most elements</li>
				  <li>Can use screen-specific layouts, reordering and offsets</li>
				  <li>Media objects can easily be nested inside each other</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="input_control">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section">
              <h2><a href="input_control" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a>&nbsp;Input Control</h2>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Forms &amp; input <a href="https://codepen.io/chalarangelo/pen/qqgVKb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Simple form&lt;/legend&gt;
    &lt;div class=&quot;input-group fluid&quot;&gt;
      &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
      &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;input-group fluid&quot;&gt;
      &lt;label for=&quot;pwd&quot;&gt;Password&lt;/label&gt;
      &lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;input-group vertical&quot;&gt;
      &lt;label for=&quot;nmbr&quot;&gt;Number&lt;/label&gt;
      &lt;input type=&quot;number&quot; id=&quot;nmbr&quot; value=&quot;5&quot;&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Link <code>&lt;label&gt;</code> elements to their respective <code>&lt;input&gt;</code> elements for ease-of-use</li>
                  <li>Use of the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended</li>
                  <li>Forms are inline by default, use <code>.input-group</code> to align elements inside them</li>
                  <li>Non-standard input types are not stylized like the rest</li>
                  <li>Checkboxes and radio buttons are stylized differently, as shown below</li>
                  <li>You can use the grid module's column classes to align form elements or make them responsive</li>
                  <li>Avoid using <code>.input-group</code> in aligned forms</li>
				  				<li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</li>
				  				<li>Vertically align <code>.input-group</code>s using the <code>.vertical</code> class</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Checkboxes &amp; radio buttons <a href="https://codepen.io/chalarangelo/pen/yVZPEZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt;
  &lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;
&lt;/div&gt;

&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
  &lt;label for=&quot;rad1&quot;&gt;Radio&lt;/label&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Pre-styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, fully accessible</li>
                  <li>Create a <code>&lt;div <span class="fore-secondary">class</span>=<span class="fore-primary">&quot;input-group&quot;</span>&gt;</code> containing the checkbox or radio button along with its linked label</li>
                  <li>Add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to the <code>&lt;input&gt;</code> element to make full accessible</li>
                  <li>Add multiple radio buttons in the same group inside the same <code>.input-group</code> wrapper</li>
                  <li>Always use <code>.input-group</code> and follow the code structure provided in the examples</li>
                  <li>Remember to use <code>&lt;label&gt;</code> elements for every single one of your checkbox or radio buttons</li>
                </ul>
              </div>
            </div>
						<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Switches <a href="https://codepen.io/chalarangelo/pen/rwxBPv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;switch1&quot; tabindex=&quot;0&quot;&gt;
  &lt;label for=&quot;switch1&quot; class=&quot;switch&quot;&gt;Checkbox switch&lt;/label&gt;
&lt;/div&gt;

&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;radio&quot; id=&quot;radswitch1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
  &lt;label for=&quot;radswitch1&quot; class=&quot;switch&quot;&gt;Radio switch&lt;/label&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the same structure as checkboxes and radios, add <code>.switch</code> to the <code>&lt;label&gt;</code> element</li>
                  <li>Add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to the <code>&lt;input&gt;</code> element for accessibility</li>
                  <li>You can add two <code>&lt;label&gt;</code> elements inside the <code>.input-group</code>, the first one containing the text and the second one the <code>.switch</code> component to reverse the switch's layout</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Buttons &amp; button groups <a href="https://codepen.io/chalarangelo/pen/xRMPJG" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;button&gt;Default button&lt;/button&gt;
&lt;input type=&quot;button&quot; class=&quot;primary&quot; value=&quot;Primary button&quot;&gt;
&lt;input type=&quot;reset&quot; class=&quot;secondary&quot; value=&quot;Secondary button&quot;&gt;
&lt;input type=&quot;submit&quot; class=&quot;tertiary&quot; value=&quot;Tertiary button&quot;&gt;
&lt;button class=&quot;inverse&quot;&gt;Inverse button&lt;/button&gt;
&lt;button class=&quot;small&quot;&gt;Small button&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt;
&lt;button disabled&gt;Disabled button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Link button&lt;/a&gt;
&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Link button&lt;/a&gt;
&lt;label class=&quot;button&quot;&gt;Label button&lt;/label&gt;
&lt;label role=&quot;button&quot;&gt;Label button&lt;/label&gt;

&lt;div class=&quot;button-group&quot;&gt;
  &lt;button&gt;Button&lt;/button&gt;
  &lt;button&gt;Button&lt;/button&gt;
  &lt;button&gt;Button&lt;/button&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>All button types have been stylized</li>
                  <li>Button styles are available for other elements, using the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> attribute</li>
                  <li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
                  <li><code>.small</code> and <code>.large</code> size variants</li>
                  <li>Create responsive button groups by wrapping multiple button elements inside a <code>.button-group</code> wrapper</li>
                  <li>Button groups are responsive, but might be displayed incorrectly in older browsers</li>
                  <li>Mix size and color variants, don't mix two variants of the same type</li>
                  <li>Avoid using different size variants inside a <code>.button-group</code></li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>File upload buttons <a href="https://codepen.io/chalarangelo/pen/NbowBz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;input type=&quot;file&quot; id=&quot;file-input&quot;&gt;
&lt;label for=&quot;file-input&quot; class=&quot;button&quot;&gt;Upload file...&lt;/label&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Link an <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code> element to a <code>&lt;label&gt;</code></li>
                  <li>The file button will not change text when uploading a file, Javascript may be required</li>
                  <li>Compatible with <code>.input-group</code></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="navigation">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="navigation" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;header&gt;
  &lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt;
  &lt;button&gt;Home&lt;/button&gt;
  &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;News&lt;/a&gt;
  &lt;span&gt;|&lt;/span&gt;
  &lt;button&gt;About&lt;/button&gt;
  &lt;button&gt;Contact&lt;/button&gt;
&lt;/header&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
                  <li>The rest of the elements inside the <code>&lt;header&gt;</code> must be button elements (i.e. <code>&lt;button&gt;</code>, <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;button&quot;</span>&gt;</code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> or <code>.button</code>)</li>
                  <li>Use <code>&lt;span&gt;</code> elements as separators</li>
                  <li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
                  <li>The logo element should not be a <code>&lt;button&gt;</code> element or of the <code>.button</code> class</li>
                  <li>Header is not displayed as fixed by default</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;nav&gt;
  &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  &lt;span&gt;News&lt;/span&gt;
  &lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;New Courses&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Certifications&lt;/a&gt;
  &lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
  &lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
  &lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
  &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
  &lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use <code>&lt;nav&gt;</code> element, populate it with links</li>
                  <li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
                  <li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
                </ul>
              </div>
            </div>
						<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Drawer <a href="https://codepen.io/chalarangelo/pen/JNvPrB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;header&gt;
  &lt;label for=&quot;drawer-checkbox&quot; class=&quot;button drawer-toggle&quot;&gt;&lt;/label&gt;
&lt;/header&gt;

&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
&lt;div class=&quot;drawer&quot;&gt;
  &lt;label for=&quot;drawer-checkbox&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
  &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Structure as follows:<ol>
										<li><code>&lt;label&gt;</code> element with the <code>.drawer-toggle</code> class in the <code>&lt;header&gt;</code> element, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> used to toggle the drawer component</li>
										<li><code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element with a unique <code class="fore-secondary">id</code></li>
										<li><code>&lt;div&gt;</code> element with the <code>.drawer</code> class immediately after the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code></li>
										<li>Empty <code>&lt;label&gt;</code> element with the <code>.close</code> class inside the <code>.drawer</code>, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code></li>
									</ol></li>
									<li>Drawers are left-aligned and expand on non-mobile screen sizes by default</li>
                  <li>Use <code>.right</code> to create right-aligned drawers or <code>.persistent</code> for non-responsive drawers.</li>
                  <li>Apply the <code>.drawer</code> class on a navigation bar and combine with grid classes for best results</li>
									<li>Use the syntax exactly as presented in the examples, do not add elements between the checkbox and the container</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;footer&gt;
  &lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Simple syntax and structure, add content as normal</li>
                </ul>
              </div>
            </div>
			<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;header class=&quot;sticky&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt; &lt;button&gt;Home&lt;/button&gt; &lt;button&gt;About&lt;/button&gt;
&lt;/header&gt;

&lt;footer class=&quot;sticky&quot;&gt;
  &lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use <code>.sticky</code> class to create</li>
                  <li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="table">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="table" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a>&nbsp;Table</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Basic syntax &amp; responsiveness <a href="https://codepen.io/chalarangelo/pen/XNOzBv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;table&gt;
  &lt;caption&gt;People&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Surname&lt;/th&gt;
      &lt;th&gt;Alias&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Chad&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Wilberts&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;MrOne&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Adam&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Smith&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;TheSmith&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Sophia&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Canderson&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;Candee&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Table structure is as follows:
                  <ol>
                    <li><code>&lt;table&gt;</code> element is the table's root element</li>
                    <li><code>&lt;caption&gt;</code> (optional) serves as the table's title and must be the first element inside the table</li>
                    <li><code>&lt;thead&gt;</code> serves as the table's header row, populated with <code>&lt;th&gt;</code></li>
                    <li><code>&lt;tfoot&gt;</code> (optional) serves as the table's footer and must be immediately after <code>&lt;thead&gt;</code></li>
                    <li><code>&lt;tbody&gt;</code> is the table's body, populated with <code>&lt;td&gt;</code> elements</li>
                  </ol>
                  </li>
                  <li>Tables are responsive and collapse into cards on mobile devices</li>
                  <li>Always specify a <code>data-label</code> for each <code>&lt;td&gt;</code> element corresponding to the column's header to properly display table on mobile devices</li>
				  <li>Avoid having multiline <code>&lt;thead&gt;</code> elements, however if you need to, you can use <a href="https://codepen.io/chalarangelo/pen/VPqWQE">this fix</a></li>
                  <li>For horizontal tables or matrices, check the examples below</li>
                </ul>
              </div>
            </div>
						<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Scrollable tables <a href="https://codepen.io/chalarangelo/pen/OgMgRb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;table class=&quot;scrollable&quot;&gt;
  &lt;caption&gt;People&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Surname&lt;/th&gt;
      &lt;th&gt;Alias&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Chad&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Wilberts&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;MrOne&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Adam&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Smith&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;TheSmith&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Sophia&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Canderson&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;Candee&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.scrollable</code> class to make a <code>&lt;table&gt;</code> scrollable</li>
                  <li>Does not support the <code>&lt;tfoot&gt;</code> element</li>
                  <li>Scrollable tables might not be fully compatible with older browsers</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Horizontal tables <a href="https://codepen.io/chalarangelo/pen/vybWzx" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;table class=&quot;horizontal&quot;&gt;
  &lt;caption&gt;People&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Surname&lt;/th&gt;
      &lt;th&gt;Alias&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Chad&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Wilberts&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;MrOne&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Adam&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Smith&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;TheSmith&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-label=&quot;Name&quot;&gt;Sophia&lt;/td&gt;
      &lt;td data-label=&quot;Surname&quot;&gt;Canderson&lt;/td&gt;
      &lt;td data-label=&quot;Alias&quot;&gt;Candee&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.horizontal</code> class to make a <code>&lt;table&gt;</code> horizontal</li>
                  <li>Does not support the <code>&lt;tfoot&gt;</code> element</li>
                  <li>Horizontal tables might not be fully compatible with older browsers</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Table variants &amp; matrices <a href="https://codepen.io/chalarangelo/pen/qqgVQZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;table class=&quot;preset&quot;&gt;
  &lt;caption&gt;Star Wars Character Alignment Table&lt;/caption&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;Lawful&lt;/td&gt;
      &lt;th&gt;Neutral&lt;/td&gt;
      &lt;th&gt;Chaotic&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Good&lt;/th&gt;
      &lt;td&gt;Yoda&lt;/td&gt;
      &lt;td&gt;Luke Skywalker&lt;/td&gt;
      &lt;td&gt;Chewbacca&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Neutral&lt;/th&gt;
      &lt;td&gt;C-3PO&lt;/td&gt;
      &lt;td&gt;Boba Fett&lt;/td&gt;
      &lt;td&gt;Han Solo&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Bad&lt;/th&gt;
      &lt;td&gt;Darth Vader&lt;/td&gt;
      &lt;td&gt;Emperor Palpatine&lt;/td&gt;
      &lt;td&gt;Jabba the Hutt&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;table class=&quot;striped&quot;&gt;
  &lt;caption&gt;People&lt;/caption&gt;
  &lt;thead&gt;
    <span class="fore-primary">&lt;!-- ... --&gt;</span>
  &lt;/thead&gt;
  &lt;tbody&gt;
    <span class="fore-primary">&lt;!-- ... --&gt;</span>
  &lt;/tbody&gt;
&lt;/table&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.striped</code> class to make a <code>&lt;table&gt;</code> striped</li>
                  <li>Use the <code>.preset</code> class to make a <code>&lt;table&gt;</code> to create matrices or otherwise preset tables</li>
                  <li>Preset matrix tables might require some CSS tweaks to deal with border styling errors</li>
                  <li>You can combine <code>.striped</code>, <code>.preset</code> and <code>.horizontal</code>, respecting the rules of the combined structures</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="card">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="card" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a>&nbsp;Card</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/NbowEB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;section&quot;&gt;
      &lt;h3&gt;Card Title&lt;/h3&gt;
      &lt;p&gt;Card content...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;section&quot;&gt;
      &lt;h3&gt;Card Title&lt;/h3&gt;
      &lt;p&gt;Card content...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Requires familiarity with the grid module</li>
                  <li>Card structure as follows:
                  <ol>
                    <li><code>.row</code> element is the outermost wrapper of the cards layout</li>
                    <li><code>&lt;div <span class="fore-secondary">class</span>=<span class="fore-primary">&quot;card&quot;</span>&gt;</code> elements are the cards</li>
                    <li><code>.section</code> elements inside the <code>.card</code> serve as the card's sections</li>
                  </ol>
                  </li>
                  <li>Cards are responsive, might be incompatible with older browsers</li>
                  <li>A card can have as many sections as needed, sections can be almost any element</li>
                  <li>Wrap all card content in <code>.section</code> classes</li>
                  <li>Add multiple <code>.card</code> elements in the same <code>.row</code></li>
                  <li>Cards cannot be rows or columns at the same time, sections can be rows</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/gWvJEw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;card&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;section media&quot;&gt;
  &lt;div class=&quot;section double-padded&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
  &lt;div class=&quot;section dark&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
  &lt;div class=&quot;section darker&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Create media sections for images or video, using the <code>.media</code> class</li>
                  <li>Color variants for sections are available using the <code>.dark</code> and <code>.darker</code> classes</li>
                  <li>Extra padding section variant available using the <code>.double-padded</code> class</li>
                  <li><code>.media</code> sections might not be fully supported in older browsers</li>
                  <li><code>.media</code> sections have a preset height of <code>200px</code></li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Card sizing &amp; fluidity <a href="https://codepen.io/chalarangelo/pen/mOvqaM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;card small&quot;&gt;
  &lt;div class=&quot;section&quot;&gt;
    &lt;p&gt;Content&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;card large&quot;&gt;
  &lt;div class=&quot;section&quot;&gt;
    &lt;p&gt;Content&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-12&quot;&gt;
  &lt;div class=&quot;card fluid&quot;&gt;
    &lt;div class=&quot;section&quot;&gt;
      &lt;p&gt;Content&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Card size variants available using the <code>.large</code> and <code>.small</code> classes</li>
                  <li>Fluid cards available using the <code>.fluid</code> class, require the use of grid columns</li>
                  <li>Fluid cards might not display properly in older browsers and will sometimes slightly disrespect margins on certain layouts</li>
                  <li>Always wrap <code>.fluid</code> cards in columns, don't mix with non-fluid cards</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Card color variants <a href="https://codepen.io/chalarangelo/pen/BRYeeW" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;card warning&quot;&gt;
  &lt;div class=&quot;section&quot;&gt;
    &lt;p&gt;Warning&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;card error&quot;&gt;
  &lt;div class=&quot;section&quot;&gt;
    &lt;p&gt;Error&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Create yellow warning cards, using the <code>.warning</code> class</li>
                  <li>Create red error cards, using <code>.error</code> class</li>
                  <li>Avoid combining two or more card color variants</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="tab">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="tab" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a>&nbsp;Tab</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/QGYOzZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;tabs&quot;&gt;
  &lt;input type=&quot;radio&quot; name=&quot;tab-group&quot; id=&quot;tab1&quot; checked aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;tab1&quot; aria-hidden=&quot;true&quot;&gt;Tab 1&lt;/label&gt;
  &lt;div&gt;
    &lt;h3&gt;Tab 1&lt;/h3&gt;
    &lt;p&gt;This is the first tab's content.&lt;/p&gt;
  &lt;/div&gt;
  &lt;input type=&quot;radio&quot; name=&quot;tab-group&quot; id=&quot;tab2&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;tab2&quot; aria-hidden=&quot;true&quot;&gt;Tab 2&lt;/label&gt;
  &lt;div&gt;
    &lt;h3&gt;Tab 2&lt;/h3&gt;
    &lt;p&gt;This is the second tab's content.&lt;/p&gt;
  &lt;/div&gt;
  &lt;input type=&quot;radio&quot; name=&quot;tab-group&quot; id=&quot;tab3&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;tab3&quot; aria-hidden=&quot;true&quot;&gt;Tab 3&lt;/label&gt;
  &lt;div&gt;
    &lt;h3&gt;Tab 3&lt;/h3&gt;
    &lt;p&gt;This is the third tab's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Tabs structure as follows:
                  <ol>
                    <li><code>.tabs</code> element is the outermost wrapper of the tabbed layout</li>
                    <li>Multiple <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;radio&quot;</span>&gt;</code> elements followed by their linked <code>&lt;label&gt;</code> elements are the titles of tabs<li>
                    <li>Multiple <code>&lt;div&gt;</code> elements, each one after the <code>&lt;label&gt;</code> of the tab it corresponds to, as the content of each tab</li>
                  </ol>
                  </li>
                  <li>Tabs are responsive, might be incompatible with some older browsers</li>
                  <li>Make a radio button <code><span class="fore-secondary">checked</span></code> to select the tab open by default</li>
                  <li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> to input elements to add accessibility</li>
                  <li>Use the syntax exactly as presented in the examples, do not substitute with checkboxes</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Stacked tabs <a href="https://codepen.io/chalarangelo/pen/MbLOZd" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;tabs stacked&quot;&gt;
  &lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a1&quot; checked aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;a1&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 1&lt;/label&gt;
  &lt;div&gt;
    &lt;h3&gt;Section 1&lt;/h3&gt;
    &lt;p&gt;This is the first accordion section's content.&lt;/p&gt;
  &lt;/div&gt;
  &lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a2&quot;aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;a2&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 2&lt;/label&gt;
  &lt;div&gt;
    &lt;h3&gt;Section 2&lt;/h3&gt;
    &lt;p&gt;This is the second accordion section's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;tabs stacked&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;Collapse section 1&lt;/label&gt;
  &lt;div&gt;
    &lt;p&gt;This is the first collapse section's content.&lt;/p&gt;
  &lt;/div&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;c2&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;label for=&quot;c2&quot; aria-hidden=&quot;true&quot;&gt;Collapse section 2&lt;/label&gt;
  &lt;div&gt;
    &lt;p&gt;This is the second collapse section's content.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.stacked</code> class to create stacked tabs</li>
                  <li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> to input elements in order to add accessibility</li>
                  <li>Use either checkboxes or radio buttons as the <code>&lt;input&gt;</code> elements of stacked tabs</li>
                  <li>Use single checkbox in a <code>.stacked</code> tabs container, but not a single radio button</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="contextual">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="contextual" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a>&nbsp;Contextual</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Text highlighting <a href="https://codepen.io/chalarangelo/pen/gLqXqo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;mark&gt;primary&lt;/mark&gt;
&lt;mark class=&quot;secondary&quot;&gt;secondary&lt;/mark&gt;
&lt;mark class=&quot;tertiary&quot;&gt;tertiary&lt;/mark&gt;
&lt;mark class=&quot;inline-block&quot;&gt;long highlight text...&lt;/mark&gt;
&lt;mark class=&quot;tag&quot;&gt;tag&lt;/mark&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>&lt;mark&gt;</code> element for highlighting text</li>
                  <li><code>.secondary</code> and <code>.tertiary</code> classes offer color variants</li>
                  <li>Highlighted text is inline by default, use the <code>.inline-block</code> class for longer text highlights</li>
                  <li>Use the <code>.tag</code> class for highlighted tags</li>
                  <li>Combine color variants with the <code>.inline-block</code> or <code>.tag</code> class, do not combine color variants or <code>.tag</code> and <code>.inline-block</code> with each other</li>
                  <li>Do not nest <code>&lt;mark&gt;</code> elements, unless the outer element is an <code>.inline-block</code></li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Toasts <a href="https://codepen.io/chalarangelo/pen/XREdeq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;span class=&quot;toast&quot;&gt;This is a normal toast message!&lt;/span&gt;
&lt;span class=&quot;toast small&quot;&gt;This is a large toast message!&lt;/span&gt;
&lt;span class=&quot;toast large&quot;&gt;This is a small toast message!&lt;/span&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.toast</code> class on <code>&lt;span&gt;</code> elements to create toast messages</li>
                  <li>Size variants available using the <code>.small</code> and <code>.large</code> classes</li>
                  <li>Toasts have no pre-defined behavior, use Javascript</li>
                  <li>Toasts display at the bottom of the screen on top of everything else</li>
                </ul>
              </div>
            </div>
			<div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Tooltips <a href="https://codepen.io/chalarangelo/pen/MJZPrM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;span class=&quot;tooltip&quot; aria-label=&quot;This is a tooltip&quot;&gt;Hover over this text to see a tooltip!&lt;/span&gt;
&lt;span class=&quot;tooltip bottom&quot; aria-label=&quot;This is a tooltip&quot;&gt;Hover over this text to see a reverse tooltip!&lt;/span&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Create using the <code>.tooltip</code> class</li>
                  <li>Put tooltip text in the <code><span class="fore-secondary">aria-label</span></code> attribute's value</li>
				  <li>Use the <code>.bottom</code> class to make a tooltip display at the bottom of its context</li>
                </ul>
              </div>
            </div>
						<div class="section row">
			              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
			                <h3>Modals <a href="https://codepen.io/chalarangelo/pen/rwagLK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
			                <pre>&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;

&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
&lt;div class=&quot;modal&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;label for=&quot;modal-toggle&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
    &lt;h3 class=&quot;section&quot;&gt;Modal&lt;/h3&gt;
    &lt;p class=&quot;section&quot;&gt;This is a modal window!&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
			              </div>
			              <div class="col-sm-12 col-md-6">
			                <h3>Notes</h3>
			                <ul style="text-align:justify">
			                  <li>Create an <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element, immediately followed by a <code>&lt;div&gt;</code> element with the <code>.modal</code> class</li>
			                  <li>Use a <code>.card</code> inside the <code>.modal</code> to display contents</li>
							  				<li>Remember to use a <code>&lt;label&gt;</code> or some Javascript to allow users to close the dialog</li>
												<li>Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact</li>
												<li>Use <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role">dialog</a>&quot;</span></code> to add accessibility to modal dialogs</li>
			                </ul>
			              </div>
			            </div>
          </div>
        </div>
      </div>
      <div class="row" id="progress">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="progress" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a>&nbsp;Progress</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Basic progress bar <a href="https://codepen.io/chalarangelo/pen/BQMMyX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;progress value=&quot;0&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress value=&quot;1000&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>&lt;progress&gt;</code> element to create progress bars</li>
                  <li>Set <code><span class="fore-secondary">max</span>=<span class="fore-primary">&quot;1000&quot;</span></code> and a <code>value</code> between <code>0</code> and <code>1000</code></li>
                  <li>Do not use floating point values for the progress bar</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/OmQePm" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
                  <li>Inline variant available using the <code>.inline</code> class</li>
                  <li>Mix color and size variants, but not multiple of the same type</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Donut spinner <a href="https://codepen.io/chalarangelo/pen/XNOOba" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;spinner-donut&quot;&gt;&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.spinner-donut</code> class to create donut spinners</li>
                  <li>Apply class to a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element</li>
                  <li>Do not insert text inside the <code>.spinner-donut</code> element</li>
                  <li>Donut spinners can be displayed inline</li>
				  <li>Use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a>&quot;</span></code>   attribute to make donut spinner accessible</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Donut spinner variants <a href="https://codepen.io/chalarangelo/pen/VmggLE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;spinner-donut secondary&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;spinner-donut tertiary&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;spinner-donut large&quot;&gt;&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
                  <li>Alternate size available using the <code>.large</code> class</li>
                  <li>You can mix color variants with the <code>.large</code> class, but not with each other</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="utility">
        <div class="col-sm-12">
          <div class="card fluid">
            <div class="section"><h2><a href="utility" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a>&nbsp;Utility</h2></div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Visibility helpers <a href="https://codepen.io/chalarangelo/pen/ObddVK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;span class=&quot;hidden&quot;&gt;Hidden text&lt;/span&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Screen-reader-only text&lt;/span&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use <code>.hidden</code> to hide elements</li>
                  <li>Use <code>.visually-hidden</code> to show elements only in screen readers</li>
                  <li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
                  <li>Do not use both classes together</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Generic borders &amp; shadows <a href="https://codepen.io/chalarangelo/pen/bWLPdo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;span class=&quot;bordered&quot;&gt;Bordered&lt;/span&gt;
&lt;span class=&quot;rounded&quot;&gt;Rounded&lt;/span&gt;
&lt;span class=&quot;circular&quot;&gt;Circular&lt;/span&gt;
&lt;span class=&quot;shadowed&quot;&gt;Casts shadow&lt;/span&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Create generic borders using <code>.bordered</code></li>
                  <li>Rounded and circular border radii available using <code>.rounded</code> and <code>.circular</code> classes</li>
                  <li>Generic shadows available using the <code>.shadowed</code> class</li>
                  <li>Combine generic borders, border radii and generic shadows with each other but not with themselves</li>
                  <li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
                  <li>Generic borders work well with buttons</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Responsive sizing &amp; spacing classes <a href="https://codepen.io/chalarangelo/pen/VmggvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;div class=&quot;responsive-padding&quot;&gt;Responsive padding&lt;/div&gt;
&lt;div class=&quot;responsive-margin&quot;&gt;Responsive margin&lt;/div&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.responsive-padding</code> and <code>.responsive-margin</code> classes to apply responsive padding or margin respectively to any element</li>
                  <li>The two classes can be combined</li>
                  <li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
                </ul>
              </div>
            </div>
						<div class="section row">
							<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
								<h3>Responsive visibility helpers <a href="https://codepen.io/chalarangelo/pen/EmVvWz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
								<pre>&lt;span class=&quot;hidden-sm&quot;&gt;Hidden in smaller screens&lt;/span&gt;
&lt;span class=&quot;hidden-md&quot;&gt;Hidden in medium-sized screens&lt;/span&gt;
&lt;span class=&quot;hidden-lg&quot;&gt;Hidden in larger screens&lt;/span&gt;

&lt;span class=&quot;visually-hidden-sm&quot;&gt;Visually hidden in smaller screens&lt;/span&gt;
&lt;span class=&quot;visually-hidden-md&quot;&gt;Visually hidden in medium-sized screens&lt;/span&gt;
&lt;span class=&quot;visually-hidden-lg&quot;&gt;Visually hidden in larger screens&lt;/span&gt;</pre>
							</div>
							<div class="col-sm-12 col-md-6">
								<h3>Notes</h3>
								<ul style="text-align:justify">
									<li>Use the <code>.hidden-<span class="fore-primary">SCR_SZ</span></code> or <code>.visually-hidden-<span class="fore-primary">SCR_SZ</span></code> syntax, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names</li>
									<li><code><span class="fore-primary">SCR_SZ</span></code> values:
                    <ul style="text-align:justify">
                      <li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
                      <li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
                      <li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
                    </ul>
                  </li>
									<li>Responsive visibility helper classes can be combined for different screen sizes, avoid using both for the same size</li>
									<li>Responsive visibility helper classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
								</ul>
							</div>
						</div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Breadcrumbs <a href="https://codepen.io/chalarangelo/pen/bBzzEN" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;ul class=&quot;breadcrumbs&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Root&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Folder&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;File&lt;/li&gt;
&lt;/ul&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>To create breadcrumbs, create a <code>&lt;ul&gt;</code> element implementing the <code>.breadcrumbs</code> class</li>
                  <li>Do not use <code>&lt;ol&gt;</code> for breadcrumbs</li>
                  <li>Do not nest lists inside the <code>.breadcrumbs</code></li>
				  <li>Use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://www.w3.org/TR/wai-aria/roles#navigation">navigation</a>&quot;</span></code> attribute to make breadcrumbs accessible</li>
                </ul>
              </div>
            </div>
            <div class="section row">
              <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                <h3>Close icon <a href="https://codepen.io/chalarangelo/pen/KNJJVM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                <pre>&lt;span class=&quot;close&quot;&gt;&lt;/span&gt;</pre>
              </div>
              <div class="col-sm-12 col-md-6">
                <h3>Notes</h3>
                <ul style="text-align:justify">
                  <li>Use the <code>.close</code> class to create a close icon</li>
                  <li>Use a <code>&lt;span&gt;</code> or <code>&lt;div&gt;</code> element to create a close icon</li>
                  <li>Use a button element implementing the <code>.close</code> class to stylize the close icon as a button</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row box-centered">
        <div class="col-sm-12 col-lg-10 col-lg-offset-1">
        </div>
      </div>
    </main></div></div></div>
    <!-- End of page content-->
    <footer style="text-align:justify"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
  </body>
</html>
